<template>
  <div class="vedio123" style="padding-top: 50px">
    <div v-show="!isError">
      <video-player v-if="showVideo" :options="tempData.options" @duration="durationCallback">1</video-player>
    </div>
    <div v-show="isError" className="errorTip"><p>视频出错了！</p></div>
  </div>
  <div class="upload123">
    <el-button plain type="primary" @click="dialogFormVisible = true">网络视频</el-button>
    <el-button plain type="primary" @click="this.$refs.minioUpload.selectFile()">本地上传</el-button>
    <el-button plain type="reset-btn" @click="reset">重置</el-button>

    <minio-upload ref="minioUpload" @success="uploadCallback"/>

  </div>
  <el-dialog v-model="dialogFormVisible" width="100%">
    <el-form ref="netVideoForm" :model="formModel.data" :rules="formModel.rules">
      <el-form-item label="网址" prop="url">
        <el-input v-model="formModel.data.url"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveNetVideoUrl()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { nextTick } from 'vue'
import 'video.js/dist/video-js.css'  //videojs样式
import VideoPlayer from "@/components/Upload/VideoPlayer.vue";
import MinioUpload from '@/components/Upload/MinioUpload.vue'
import {onMounted, reactive, ref, toRefs, watch} from "vue";
import {ElMessage} from "element-plus";
import {courseChapterPeriodEdit, courseChapterPeriodSave} from "@/api/course";

export default {
	name: "VideoUpload",
	components: {
		VideoPlayer,
    MinioUpload
	},
  props: {
    videoSrc: {
      type: String, // 参数类型
      default: "", //默认值
      required: true //是否必传
    }
  },

  setup(props, {emit}) {
    let dialogFormVisible = ref(false);
    let showVideo = ref(true);
    let tempData = reactive({options: {}, fileInfo: {}});
    const netVideoForm = ref(null);
    let formModel = reactive({
      data: {},
      rules: {
        url:[{ required: true, message: '请输入', trigger: 'blur' }]
      }
    });

    let {videoSrc} = toRefs(props);
    // videoSrc 数据监控
    watch(videoSrc, async(val) => {
      formModel.data.url = val
      tempData.fileInfo = {url: val}
      updateVideo()
    });

    const reset = () => {
      tempData.fileInfo = {url: null}
      updateVideo();
    }
    const uploadCallback = (fileInfo) => {
      tempData.fileInfo = fileInfo
      updateVideo();
    }

    const durationCallback = (duration) => {
      // 时长只能单独回传
      tempData.fileInfo.duration = duration;
      if (duration < 0) {
        tempData.fileInfo = {}
      }
      emit('success', tempData.fileInfo);
    }

    const saveNetVideoUrl = () => {
      netVideoForm['value'].validate((valid) => {
        if (valid) {
          tempData.fileInfo = {url: formModel.data.url}
          updateVideo();
          dialogFormVisible.value = false
        }
      });
    };

    const updateVideo = () => {
      const url = tempData.fileInfo.url;
      showVideo.value = false;

      nextTick(() => {
        showVideo.value = true;
        if (url && url.length > 0) {
          tempData.options = {
            autoplay: false,
            controls: true,
            sources: [
              {
                src: url,
                type: "video/mp4"
              }
            ]
          }
        } else {
          tempData.options = {}
        }
        // emit('success', tempData.fileInfo);
      });
    }

    return {
      dialogFormVisible,
      showVideo,
      tempData,
      netVideoForm,
      formModel,
      reset,
      uploadCallback,
      durationCallback,
      // updateVideo,
      saveNetVideoUrl
    }
  }
};
</script>
<style scoped>
.vedio123 {
  width: 100%;
  height: 100%;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  /* display: flex; */
  align-items: center;
  justify-content: center;
}
.vedio123:hover {
  border-color: #409eff;
}
.upload123 {
  /* background-color: #3a8ee6; */
  position: absolute;
  top: 0;
  right: 0;
}
</style>
